<template>
  <div ref="globe" style="width: 100%; height: 100vh" class="login">
    <div class="login-form">
      <el-form ref="loginForm">
        <el-input
          v-model="loginForm.username"
          placeholder="请输入管理员账号"
          class="login-form-input"
        ></el-input>
        <el-input
          v-model="loginForm.password"
          placeholder="请输入密码"
          show-password
          class="login-form-input"
        ></el-input>
        <el-button type="login" v-on:click="login" class="login-form-input"
          >登录</el-button
        >
      </el-form>
    </div>
  </div>
</template>

<script>
import * as THREE from 'three'
import GLOBE from 'vanta/src/vanta.GLOBE'

export default {
  name: 'Login',
  mounted () {
    this.vantaEffect = GLOBE({
      el: this.$refs.globe,
      THREE: THREE
    })
    // 这里重新设置样式
    this.vantaEffect.setOptions({
      mouseControls: true,
      touchControls: true,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1.00
    })
  },
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    login () {
      this.$router.replace('/home')
    }
  }
}
</script>

<style scpoed>
.login {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-form {
  display: flex;
  align-items: center;

  width: 20%;
  height: 300px;

  margin-left: 25%;
  padding: 30px;

  background-color: rgba(255, 255, 255, 0.5);
}

.login-form-input {
  margin-bottom: 40px;
  border-radius: 0;
}

.el-input__inner {
  border-radius: 0;
}

.el-button--login:focus,
.el-button--login:hover {
  background: #67a8fd;
  border-color: #67a8fd;
  color: #fff;
}

.el-button--login {
  width: 100%;
  color: #fff;
  background-color: #215496;
  border-color: #215496;
}
</style>
